@charset "utf-8";
@import "./demo.scss";

/*------------------------*/
/*        class           */
/*------------------------*/





/*------------------------*/
/*        layout          */
/*------------------------*/
header {
    position: fixed;
    width: 100%;
    height: half(150);
    top: 0;
    padding: half(17) half(23) half(10);

    .logo {
        width: half(123);
        height: half(123);
        font-size: 0;

        // overflow: hidden;
        img {
            width: 100%;
            height: 100%;
        }
    }

    .cityBar {
        width: half(157);
        height: half(54);
        border: 1px solid #ff9344;
        font-size: 0;
        margin-top: half(30);

        select {
            width: 100%;
            height: 100%;
            // 去除默认样式
            -webkit-appearance: none;
            appearance: none;
            border: 0;
            border-radius: 0;
            padding-left: 14px;
            background-image: url("../img/jiantou.png");
            background-repeat: no-repeat;
            background-position: right 5px center;
            background-size: half(30) half(16);
        }

        option {
            width: 100%;
        }
    }

    .searchBar {
        margin: half(24) auto 0;
        width: rem(264);
        height: half(50);
        border: 1px solid #ff9344;
        border-radius: half(50);
        font-size: 0;
        overflow: hidden;

        input[type="image"] {
            width: half(37);
            height: half(35);
            vertical-align: middle;
        }

        input[type="text"] {
            width: calc(100% - 28.5px);
            border: none;
            text-indent: half(26);
            height: 100%;
            vertical-align: middle;
        }
    }
}

#main {
    position: fixed;
    top: half(150);
    bottom: half(136);
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    font-size: 0;

    /*  part 1. show    */
    .show_pic{
        width: 100%;
    }

    /*  part 2. on sale    */
    .on_sale {
        width: 100%;
        // height: rem(93);
        background-color: #fff;
        .on_sale_title{
            width: inherit;
            height: rem(93);
            .title_area{
                .title_text{
                    text-indent: rem(8);
                }
            }
        }
        .on_sale_content{
            width: 100%;
            height: rem(227);
            ul{
                width: 100%;
                box-sizing: border-box;
                padding: rem(12) rem(80) 0;
                li{
                    width: 50%;
                    margin-bottom: rem(30);

                    &:nth-last-of-type(1){
                        margin-bottom: 0;
                    }
                    &:nth-last-of-type(2){
                        margin-bottom: 0;
                    }
                    img{
                        width: rem(242);
                        height: rem(94);
                    }
                }
            }
        }

    }
    /*  part 3. prefer  */
    .prefer{
        width: 100%;
        background-color: #fff;

        .prefer_content{
            width: 100%;
            box-sizing: border-box;
            padding: rem(24) rem(14) 0 rem(20);

            .food_area{
                margin-bottom: half(31);
                height: rem(163);
                background-color: #fff;
                .food_img{
                    width: rem(210);
                    height: inherit;
                }
                .food_info{
                    width: rem(300);
                    height: inherit;
                    .title_text{
                        height: rem(70);
                        text-indent: rem(20);
                        line-height: rem(70);
                    }
                    .food_detail{
                        height: rem(38);
                        line-height: rem(38);
                        @extend .title_text;
                        font-size: rem(22);
                        text-indent: rem(26);
                        color: #494949;
                    }
                    .food_money{
                        height: rem(54);
                        line-height: rem(54);
                        @extend .title_text;
                        font-size: rem(32);
                        text-indent: rem(26);
                        color: #ff9344;
                    }
                }
                .food_rstrt{
                    width: rem(140);
                    height: inherit;
                    text-align: right;
                    box-sizing: border-box;
                    padding-top: half(36);
                    .distant{
                        @extend .title_text;
                        font-size: rem(22);
                        text-indent: rem(26);
                        color: #494949;
                    }
                    .sale_num{
                        margin-top: half(48);
                        @extend .title_text;
                        font-size: rem(22);
                        text-indent: rem(26);
                        color: #494949;
                    }
                }
            }
        }
    }

}
